<template>
  <div class="login">
    <div class="logo" />

    <div class="content">
      <div class="left">
        <h2>智能教育云平台</h2>
      </div>
      <div class="right">
        <h1>欢迎登录</h1>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          class="ruleForm"
          @keyup.enter.native="login"
        >
          <el-form-item prop="username" label="账号">
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item prop="pswd" label="密码">
            <el-input
              v-model="ruleForm.pswd"
              @paste.native.capture.prevent="handlefalse" 
              @copy.native.capture.prevent="handlefalse" 
              @cut.native.capture.prevent="handlefalse" 
              @keyup.native="handlefalse"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <!-- <el-form-item prop="code">
                        <el-input
                            class="code"
                            placeholder="验证码"
                            v-model="ruleForm.code"
                        >
                            <template slot="append">
                                <div class="codeImg" @click="getCode">
                                    <img :src="codeImg" />
                                </div>
                            </template>
                        </el-input>
                    </el-form-item> -->
          <el-button
            class="loginBtn"
            type="primary"
            @click="login"
          >登录</el-button>
          <ul class="loginBox">
            <li>
              <el-checkbox
                v-model="rember"
                class="rember"
              >记住用账号密码</el-checkbox>
            </li>
            <!-- <li>

                        </li> -->
          </ul>
        </el-form>
        <!-- <div class="forget">
                    <el-button type="text" @click="toRegister"
                        >忘记密码?</el-button
                    >
                </div> -->
        <!-- <div class="regist">
                没有帐号?
                <el-button type="text" @click="toRegister">立即注册</el-button>
            </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import md5 from 'js-md5'
import Util from '@/libs/util'
import Axios from '@/libs/axios'

export default {
  data() {
    const account = Util.getlocalStorage('account') || {}
    return {
      // selecter:{
      //     show:false,
      //     data:[]
      // },
      codeImg: '',
      ruleForm: {
        username: account.username || '',
        pswd: account.pswd || '',
        code: '123456',
        tenantid: 'rtid'
      },
      rember: account.rember || true,
      rules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
            // },
            // {
            //     min: 5,
            //     max: 20,
            //     message: "用户名长度在 5 到 20 位字符",
            //     trigger: "blur"
          }
        ],
        pswd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
            // },
            // {
            //     min: 5,
            //     max: 20,
            //     message: "密码长度为 5 到 20 位字符",
            //     trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    // setTimeout(
    //     function() {
    //         this.getCode();
    //     }.bind(this),
    //     500
    // );

    // let {query} = this.$route

    // if(query && query.type == 'common'){
    //     this.selecter.show = true
    //     console.log(query)
    // }
    const url = window.location.href
    if (url.indexOf('localhost') > -1 || url.indexOf('dev') > -1) {
      this.ruleForm.tenantid = 'rtdl-dev'
    }
  },
  methods: {
    handlefalse(){
      return false
    },
    login() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          const loading = Util.loading()

          Axios.axiosInstance
            .post('/sso/api/login', this.ruleForm)
            .then(response => {
              // 记住密码
              this.remberLoginForm()
              // 登录成功跳转
              // Util.setlocalStorage("user", response.data);
              // _this.$store.commit('SET_user', response.data)

              setTimeout(() => {
                loading.close()
                // this.$router.replace({
                //     path: "/"
                // });
                window.location.href = response.homeUrl
              }, 500)
            })
            .catch(err => {
              setTimeout(() => {
                loading.close()
              }, 1000)
            })
        }
      })
    },
    remberLoginForm() {
      if (this.rember) {
        Util.setlocalStorage('account', {
          ...this.ruleForm,
          rember: this.rember
        })
      } else {
        Util.removelocalStorage('account')
      }
    },
    getCode() {
      // Axios.axiosInstance
      //     .get("/System/System/ACHIMS_GetCode")
      //     .then(response => {
      //         this.ruleForm.codeNum = response.data.c;
      //         // 获取验证码图片
      //         this.codeImg = response.data.v;
      //     });
    },
    toRegister() {
      this.$router.push({
        username: 'Register'
      })
    }
  }
}
</script>
<style lang="scss">
.login {
    overflow: hidden;
    display: flex;
    height: 100%;
    background: url("../assets/login.png") #fbf7f8 no-repeat;
    background-size: 100%;
    background-position: center;
    font-family: Microsoft YaHei;
    .logo {
        position: absolute;
        left: 3%;
        top: 5%;
        background: url("../assets/logo.png") no-repeat;
        background-size: contain;
        width: 260px;
        height: 50px;
    }

    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 900px;
        // height: 500px;
        display: flex;
    }
    .left {
        // flex: 1;
        // position: relative;
        width: 50%;
        // height: 100%;
        background: url("../assets/leftBg.png") no-repeat;
        background-size: cover;
        h2 {
            margin: 120px 0 0 40px;
            // font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 28px;
            line-height: 150%;
            color: #fff;
        }
    }
    .right {
        flex:1;
        padding: 50px 60px 100px;
        background: #fff;
        h1 {
            // padding: 0 0 10px;
            margin: 0 0 30px;
            text-align: center;
            color: #000;
            // font-weight: normal;
            line-height: 150%;
            // font-family: Microsoft YaHei;
            font-size: 22px;
        }
        .ruleForm {
            position: relative;

            .el-input {
                input {
                    border-radius: 0;
                }
                &.code {
                    // input {
                    //     border-radius: 20px 0 0 20px;
                    // }
                    // .el-input-group__append {
                    //     border-radius: 0 20px 20px 0;
                    // }
                    .codeImg {
                        width: 80px;
                        cursor: pointer;
                    }
                }
            }

            .loginBtn {
                margin-top: 30px;
                width: 100%;
                justify-content: center;
                background: #000;
                border-radius: 0;
            }
            .loginBox {
                display: flex;
                flex: 1;
                justify-content: center;
                align-items: center;
                margin-top: 25px;
                li {
                    flex: 1;
                    .rember {
                        color: #fff;
                        .el-checkbox__label {
                            color: #666;
                        }
                        .el-checkbox__inner {
                            background: #000;
                            border-color: #000;
                            border-radius: 50%;
                        }
                    }
                    // .loginBtn {
                    //     width: 100%;
                    //     justify-content: center;
                    // }
                }
            }
        }

        .forget {
            text-align: right;
        }

        .regist {
            position: absolute;
            bottom: 30px;
            width: 100%;
            padding-top: 30px;
            text-align: center;
            font-size: 14px;
        }
    }
}
</style>
